<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>和风天气</title>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <style></style>
  </head>
  <body>
    <!-- 主容器，使用flex布局实现左右结构 -->
    <div class="w-screen h-screen flex">
      <!-- 左侧固定宽度的黑色区域（占位） -->
      <div class="w-[300px] h-screen bg-black"></div>
      <!-- 地图容器，占据剩余空间 -->
      <div id="container" class="h-screen flex-1"></div>
    </div>

    <!-- 导航栏 -->
    <nav
      class="absolute top-4 right-4 bg-white rounded-xl  px-4 py-2 flex items-center justify-between gap-4 w-[500px] z-50"
    >
      <!-- 左侧导航菜单 -->
      <div class="flex items-center gap-4">
        <!-- 天气预报链接 -->
        <a
          href="#"
          class="text-sm font-medium text-gray-700 hover:text-blue-600"
          >天气预报</a
        >
        <!-- 商业气象链接 -->
        <a
          href="#"
          class="text-sm font-medium text-gray-700 hover:text-blue-600"
          >商业气象</a
        >
        <!-- 天气API链接 -->
        <a
          href="#"
          class="text-sm font-medium text-gray-700 hover:text-blue-600"
          >天气API</a
        >
        <!-- 下载APP链接，包含图标和红点提示 -->
        <a
          href="#"
          class="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-blue-600"
        >
          <!-- 手机图标 -->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            class="w-4 h-4"
          >
            <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
            <path d="M12 18v-4M12 14h.01" />
          </svg>
          下载APP
          <!-- 红点提示 -->
          <span class="w-2 h-2 bg-red-500 rounded-full"></span>
        </a>
      </div>

      <!-- 分隔线 -->
      <div class="w-px h-6 bg-gray-300"></div>

      <!-- 右侧下拉菜单 -->
      <div class="flex items-center gap-4">
        <!-- 语言选择下拉 -->
        <div
          class="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-blue-600 cursor-pointer"
        >
          <!-- 信息图标 -->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            class="w-4 h-4"
          >
            <circle cx="12" cy="12" r="10" />
            <path d="M12 8v4M12 16h.01" />
          </svg>
          中文
          <!-- 下拉箭头图标 -->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            class="w-4 h-4"
          >
            <path d="M6 9l6 6 6-6" />
          </svg>
        </div>
        <!-- 更多选项下拉 -->
        <div
          class="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-blue-600 cursor-pointer"
        >
          更多
          <!-- 下拉箭头图标 -->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            class="w-4 h-4"
          >
            <path d="M6 9l6 6 6-6" />
          </svg>
        </div>
      </div>
    </nav>

    <!-- 图层控制面板 -->
    <div
      class="absolute top-20 right-4 z-50 bg-white rounded-xl shadow-lg p-2 w-32 space-y-2"
    >
      <!-- 温度图层按钮（默认激活） -->
      <button
        class="flex items-center justify-between w-full px-3 py-2 text-xs font-medium text-gray-700 bg-blue-500 text-white rounded-lg active:bg-blue-600"
      >
        <span>温度</span>
        <!-- 加号图标 -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="white"
          stroke-width="2"
          class="w-4 h-4"
        >
          <path d="M12 2v20M2 12h20" />
        </svg>
      </button>
      <!-- 相对湿度图层按钮 -->
      <button
        class="flex items-center justify-between w-full px-3 py-2 text-xs font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition"
      >
        <span>相对湿度</span>
        <!-- 加号图标 -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          class="w-4 h-4"
        >
          <path d="M12 2v20M2 12h20" />
        </svg>
      </button>
      <!-- 云量图层按钮 -->
      <button
        class="flex items-center justify-between w-full px-3 py-2 text-xs font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition"
      >
        <span>云量</span>
        <!-- 加号图标 -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          class="w-4 h-4"
        >
          <path d="M12 2v20M2 12h20" />
        </svg>
      </button>
      <!-- 海浪高度图层按钮 -->
      <button
        class="flex items-center justify-between w-full px-3 py-2 text-xs font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition"
      >
        <span>海浪高度</span>
        <!-- 加号图标 -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          class="w-4 h-4"
        >
          <path d="M12 2v20M2 12h20" />
        </svg>
      </button>
      <!-- 更多图层按钮 -->
      <button
        class="flex items-center justify-between w-full px-3 py-2 text-xs font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition"
      >
        <span>更多图层</span>
        <!-- 下拉箭头图标 -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          class="w-4 h-4"
        >
          <path d="M6 9l6 6 6-6" />
        </svg>
      </button>
      <!-- 风/海浪切换开关 -->
      <label
        class="flex items-center gap-2 text-xs font-medium text-gray-700 cursor-pointer"
      >
        <!-- 隐藏的复选框 -->
        <input type="checkbox" class="sr-only" id="wind-toggle" />
        <!-- 自定义开关样式 -->
        <span class="relative inline-block w-10 h-5 rounded-full bg-gray-300">
          <span
            class="absolute inset-0 flex items-center justify-center transition-transform duration-200 ease-in-out transform bg-white rounded-full"
          >
            <!-- 下拉箭头图标 -->
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              class="w-3 h-3"
            >
              <path d="M6 9l6 6 6-6" />
            </svg>
          </span>
        </span>
        <span>风/海浪</span>
      </label>
    </div>

    <!-- 缩放控制面板 -->
    <div
      class="absolute top-1/2 right-4 transform -translate-y-1/2 z-50 flex flex-col items-center gap-2"
    >
      <!-- 定位按钮 -->
      <button
        class="w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center text-gray-800 hover:bg-blue-50 transition"
        title="定位到当前位置"
        onclick="map.locate({setView: true, maxZoom: 16})"
      >
        <!-- 定位图标 -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
        >
          <g
            fill="none"
            stroke="#000"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
          >
            <path
              d="M12 2a6 6 0 0 0-6 6c0 1.419.302 2.348 1.125 3.375L12 17l4.875-5.625C17.698 10.348 18 9.419 18 8a6 6 0 0 0-6-6"
            />
            <path
              d="M5 15.143C3.149 15.87 2 16.881 2 18c0 2.21 4.477 4 10 4s10-1.79 10-4c0-1.119-1.149-2.13-3-2.857"
            />
            <circle cx="12" cy="8" r="1" />
          </g>
        </svg>
      </button>

      <!-- 放大按钮 -->
      <button
        class="w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center text-gray-800 hover:bg-green-50 transition"
        title="放大"
        onclick="map.zoomIn()"
      >
        <!-- 加号图标 -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          class="w-5 h-5"
        >
          <path d="M12 5v14M5 12h14" />
        </svg>
      </button>

      <!-- 缩小按钮 -->
      <button
        class="w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center text-gray-800 hover:bg-red-50 transition"
        title="缩小"
        onclick="map.zoomOut()"
      >
        <!-- 减号图标 -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          class="w-5 h-5"
        >
          <path d="M5 12h14" />
        </svg>
      </button>
    </div>

    <!-- 温度颜色条（独立div，只包含颜色条） -->
   <!--  <div
      class="absolute bottom-4 right-4 z-50 w-4 h-64 rounded-lg overflow-hidden border-2 border-white shadow-lg bg-gradient-to-b from-red-600 via-orange-500 via-yellow-400 via-green-500 via-teal-400 via-blue-500 to-purple-600"
    ></div>

    
    <div
      class="absolute bottom-4 right-10 z-50 w-6 h-64 flex flex-col justify-between text-xs font-medium px-1 py-2"
    >
      <span class="text-black bg-transparent">40°</span>
      <span class="text-black bg-transparent">30°</span>
      <span class="text-black bg-transparent">20°</span>
      <span class="text-black bg-transparent">10°</span>
      <span class="text-black bg-transparent">0°</span>
      <span class="text-black bg-transparent">-10°</span>
      <span class="text-black bg-transparent">-20°</span>
      <span class="text-black bg-transparent">°C</span>
    </div> 
  </body>
  引入腾讯地图JavaScript API -->
  <script src="https://map.qq.com/api/gljs?v=1.exp&key=U6PBZ-BRBW5-C4EIQ-IM3AS-FKVRQ-4WFTG"></script>
  <!-- 地图初始化脚本 -->
  <script>
    //地图初始化函数，本例取名为init，开发者可根据实际情况定义
    function initMap() {
      //定义地图中心点坐标
      var center = new TMap.LatLng(39.98412, 116.307484);
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new TMap.Map(document.getElementById("container"), {
        center: center, //设置地图中心点坐标
        zoom: 17.2, //设置地图缩放级别
        pitch: 43.5, //设置俯仰角
        rotation: 45, //设置地图旋转角度
      });
    }
    initMap();
  </script>
</html>
